<template>
  <div class="retype">
    <!-- 上方图标区域 -->
    <div class="cell-phone" v-if="show">
      <div class="myicon">
        <van-icon name="arrow-left" @click="onClickLeft" color="#07d0cc" />
      </div>
      <!-- 输入手机号区域下方内容区域 -->
      <div class="content">
        <div class="title">
          <span>找回密码</span>
          <div>请填写注册手机号验证身份</div>
        </div>
        <div class="mobile">
          <van-form @submit="onSubmit">
            <van-field
              v-model="mobile"
              label="注册手机号   +86"
              placeholder="请填写手机号码"
              :rules="rules.mobile"
            />
            <div style="margin: 16px" class="mybutton">
              <van-button
                round
                block
                type="info"
                native-type="submit"
                color="#00d1d1"
                >下一步</van-button
              >
            </div>
          </van-form>
        </div>
      </div>
    </div>

    <!-- 输入验证码区域 -->
    <div class="code" v-if="!show">
        <van-icon name="arrow-left" @click="twoClickLeft" color="#07d0cc" />
      <div class="title">
        <span>输入短信验证码</span>
        <div>已向 <span>+86 {{mobile}}</span> 发送验证码</div>
      </div>
      <div class="mycode">
        <!-- 验证码表单 -->
        <van-password-input
          :value="value"
          :mask="false"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
          :gutter="10"
        />
        <div class="anew">重新发送（{{}}）</div>
        <!-- 数字键盘 -->
        <van-number-keyboard
          v-model="value"
          :show="showKeyboard"
          @blur="showKeyboard = false"
        />
        <!-- 按钮区域 -->
        <div class="sonbutton">
          <van-button round block type="info" color="#00d1d1" @click="next"
            >下一步</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '', //短信验证码
      showKeyboard: false, //控制焦点的显示和隐藏
      show: true, //控制手机号内容和验证码内容的隐藏
      mobile: "17775887541", //用户输入的手机号
      rules: {
        mobile: [
          { required: true, message: "请输入手机号" },
          // 用来验证输入的是不是手机号
          { pattern: /^1[2-9]\d{9}$/, message: "请输入正确的手机号" },
        ],
      },
    };
  },
  methods: {
    // 点击左侧箭头事件
    onClickLeft() {
      this.$router.push("/login");
    },
    //输入验证码图标事件
    twoClickLeft() {
      this.show = true;
    },
    //点击提交按钮
    onSubmit() {
      this.show = false;
    },
    //提交验证码后按钮功能
    next() {
      console.log(this.value);
      if (this.value==='') {
        this.$toast.fail("请输入验证码");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.retype {
  .myicon {
    ::v-deep .van-icon {
      margin: 45px 0 0 20px !important;
    }
  }
  .content {
    margin-top: 52px;
    .title {
      margin-left: 38px;
      span {
        font-weight: 700;
      }
      div {
        font-size: 18px;
        margin-top: 14px;
      }
    }
    .mobile {
      text-align: left;
      margin-top: 66px;
      ::v-deep .van-field__label {
        margin-left: 28px !important;
        font-size: 18px !important;
        width: 130px !important;
      }
      ::v-deep .van-form {
        .mybutton {
          margin: 0 auto !important;
          text-align: center !important;
          margin-top: 320px !important;
          width: 314px !important;
          height: 60px !important;
        }
        .van-button {
          height: 60px !important;
        }
      }
    }
  }

  .code {

      ::v-deep .van-icon {
        margin:0 0 60px 20px !important;
      }
    margin-top: 44px;
    .title {
      margin-left: 40px;
      span {
        font-size: 28px;
        font-weight: 700;
      }
      div {
        font-size: 20px;
        margin-top: 14px;
        span{
            color: #1ed5d5;
            font-size: 20px;
        }
      }
    }
    .mycode {
      .van-password-input__security {
        margin-top: 66px !important;
      }
      .van-password-input__item {
        border: 2px solid #f0f0f0 !important;
        margin-left: 10px !important;
        border-radius: 14px !important;
        height: 66px !important;
      }
      .anew {
        text-align: center;
        margin-top: 30px;
        font-size: 20px;
        color: #f0f0f0;
      }
      .sonbutton {
        margin: 0 auto !important;
        text-align: center !important;
        margin-top: 255px !important;
        width: 314px !important;
        height: 60px !important;
        .van-button {
          height: 60px !important;
        }
      }
    }
  }
}
</style>
